<template>
	<view class="com_unit" :style="[module_style]">
		<view class="num" :style="[num_style]">
			{{ num }}
		</view>
		<view class="unit" :style="[unit_style]">
			{{ unit }}
		</view>
	</view>
</template>

<script>
import storeMixin from '@/store/storeMixin';
export default {
	mixins: [storeMixin],
	name: 'smallPrice',
	props: {
		num: {
			type: [Object, String, Number],
			default: 0,
		},
		num_color: {
			type: [String],
			default: '#000000',
		},
		font: {
			type: [Number, String],
			default: 48,
		},
		ratio: {
			type: [Number, String, Number],
			default: 0.5,
		},
		unit: {
			type: [String],
		},
		unit_color: {
			type: [String],
			default: '',
		},
		position: {
			type: [Number, String],
			default: 'top',
		},
		bold: {
			type: [Boolean],
			default: false,
		},
	},
	data() {
		return {
			dataprice: '',
			position_view: {
				top: 'flex-start',
				center: 'center',
				bot: 'flex-end',
			},
		};
	},
	created() {},
	mounted() {},
	computed: {
		module_style() {
			let style = {};
			style['align-items'] = this.position_view[this.position];
			if (this.bold) {
				style['font-weight'] = 'bold';
			}
			return style;
		},

		num_style() {
			let style = {};
			style['font-size'] = `${this.font}rpx`;
			style['color'] = `${this.num_color}`;
			return style;
		},
		unit_style() {
			let style = {};
			style['font-size'] = `${this.font * this.ratio}rpx`;
			style['color'] = `${this.num_color}`;
			if (this.unit_color) {
				style['color'] = `${this.unit_color}`;
			}
			return style;
		},
	},
	methods: {},
};
</script>

<style lang="scss">
.com_unit {
	display: flex;
	line-height: 1;
	.unit {
		margin-left: 2rpx;
	}
}
</style>
